<el-card>
  <template #header>
    <el-button circle plain @click="getAll">
      <template #icon><Refresh></Refresh></template>
    </el-button>
    <el-button type="primary" @click="addBookTypeDialogVisible = true">
      <template #icon><Plus></Plus></template>
      添加类型
    </el-button>
  </template>
  <el-table v-loading="loading" :data="bookTypeList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="type" label="类型名称" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-popconfirm title="确认删除当前类型？" @confirm="deleteBookType(row.id)">
          <template #reference>
            <el-button text type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</el-card>

<el-dialog v-model="addBookTypeDialogVisible" title="添加类型" width="300px">
  <el-input v-model="bookType" />
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="addBookTypeDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addBookType">确认</el-button>
    </span>
  </template>
</el-dialog>
